<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="myinf wrapbd">
            <h2 class="group-t">个人资料</h2>
            <cell-group>
                <cell title="手机号" is-link :value="userInfo.moble" url='' @click="toEdit('moble',userInfo.moble, 1, '手机号')" />
                <cell title="微信号" is-link :value="userInfo.wechat" url='' @click="toEdit('wechat',userInfo.wechat, 1, '微信号')" />
            </cell-group>
            <h2 v-if="user_type" class="group-t">店铺资料</h2>
            <cell-group v-if="user_type">
              <div class="ts">
                <span>logo</span>
                <span class="avatar" style="left: 2rem;">
                    <img v-if="logo" :src='logo' alt="">
                </span>
                <span class="avatar">
                    <input type="file" name="" @change="avatarImg($event, 'shop_logo')" class="file-prew" id="logo" accept="image/*" />
                    <img src="./../../assets/img/add.jpg" alt="">
                </span>
              </div>
              <div class="ts">
                <span>首页轮播图</span>
                <span class="avatar" v-for="(item,index) in gallery_img" :key="index" style="left: .03rem;">
                    <img :src="item.url" alt="" @click="delGalleryImg(item)">
                </span>
                <span class="avatar">
                    <input type="file" name="" @change="avatarImg($event, 'shop_gallery_img')" class="file-prew" id="frontPic" accept="image/*" />
                    <img src="./../../assets/img/add.jpg" alt="">
                </span>
              </div>
              <cell title="店铺名称" is-link :value="shopInfo.shop_name" url='' @click="toEdit('shop_name',shopInfo.shop_name, 2, '店铺名称')"/>
              <cell title="店铺简称" is-link :value="shopInfo.shop_description" url='' @click="toEdit('shop_description',shopInfo.shop_description, 2, '店铺简称')"/>
              <cell title="地址" is-link :value="shopInfo.address" url='' @click="toEdit('address',shopInfo.address, 2, '地址')" />
              <cell title="电话" is-link :value="shopInfo.mobile" url='' @click="toEdit('mobile',shopInfo.mobile, 2, '电话')"/>
              <cell title="服务类型" is-link :value="shopInfo.tags_text" url='' @click="toEdit('tags',shopInfo.tags, 2, '服务类型')" />
            </cell-group>
        </div>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import tabbar from "./../../components/tabbar.vue";
    import { Cell, CellGroup, Dialog } from 'vant';
    export default {
        data(){
            return {
                headText:'资料修改',
                num: 3,
                shopInfo: {},
                userInfo: {},
                user_type: '',
                logo: '',
                gallery_img: []
            }
        },
		mounted(){
            this.initialize() //默认拉取信息
		},
    methods:{
            // onClickLeft() {this.$router.push('/user')},
          onClickLeft () { this.$router.go(-1);},
			//上传头像
			avatarImg(e, type){
                let _this = this;
                if(_this.gallery_img.length>=3){
                  _this.$toast({message: '最多上传3张轮播图', position: 'bottom',duration: 3000})
                  return;
                }
                this.Tools.fileUploadImg({
                	url:'user/uploadimg',
                    type: type,  //上传类型
                e:e, dataSuccess:res => {
                	  if(type == 'shop_logo') {
                      _this.logo = res.data.data;
                    }
                    if(type == 'shop_gallery_img') {
                      _this.gallery_img.push({url:res.data.data}) ;
                    }
                  },
                });
            },
            delGalleryImg(item){
              Dialog.confirm({
              title: '温馨提示',
              message: '确认删除此轮播图吗？'
              }).then(() => {
                let _this = this;
                _this.gallery_img.splice(item, 1);
                this.Tools.AXIOS({
                  url: 'user/delshopgalleryimg',
                  transformRequest:{
                    gallery_img: JSON.stringify(this.gallery_img)
                  },
                  success: function (res) {
                    _this.$toast.success('删除成功');
                  }
                })
              })

            },
            //获取头像
            initialize(){
                let _this = this;
				        this.Tools.AXIOS({
                    url: 'user/userfull',
                    success: function (res) {
                        _this.user_type = res.data.data.userInfo.user_type;
                        _this.shopInfo = res.data.data.shopInfo;
                        _this.userInfo = res.data.data.userInfo;
                        _this.logo = res.data.data.shopInfo.logo;
                        _this.gallery_img = res.data.data.shopInfo.gallery_img;
                    }
                })
            },
          toEdit( index, value, type ,text){
            this.$router.push({path:'revise',query:
                {
                value:value,
                index:index,
                type:type,
                text:text
              }});
            // this.$router.push('/revise',
            //   {
            //     value:value,
            //     index:index,
            //     type:type,
            //     text:text
            //   }
            // )
          }
        },
		components: {
            HeadTitle,
            tabbar,
            Cell,
            CellGroup,
            Dialog
		},
    }
</script>
<style scoped>
.myinf .ts{ display: flex; justify-content: space-between; background: #fff; padding: 10px 15px;}
.myinf .ts i{ width: 1.3rem; height: 1.3rem; margin: 0 .3rem; background: #fff; border-radius: 100px; display: block; overflow: hidden;}
.myinf .ts span{ font-size: .4rem; line-height: 1.3rem; color: #333; }
.myinf .ts .avatar{width: 55px;height: 55px; overflow: hidden; -webkit-background-size: cover;position: relative;right: 18px;border-radius: 50%;}
.myinf .ts .avatar img{ width: 100%; height: 100%;}
.file-prew{opacity: 0;filter: alpha(opacity=0);cursor: pointer;position: absolute;left: 0;top: 0;height: 100%;width: 100%;z-index: 1;}
.group-t{ width: 100%; font-size: .38rem; color: #B5B5B5; background: #fff; text-indent: .2rem; font-weight: normal; border-bottom: 1px solid #F6F6F6; padding: .3rem 0;border-top: 8px solid #F6F6F6;text-align: left;}
</style>

